<script lang="ts" setup>
import { markRaw, onMounted } from 'vue'
import CAdminTable from '../CAdminTable.vue'
import { TableInfo } from '../tableInfo'
import { dbCompanies, Company } from './helpers/dbCompanies'
import DbFormContractor from './helpers/DbFormContractor.vue'
import { openModalConfirmation } from '../../CModalConfirmation/helpers'
import CInput from '../../CInput/CInput.vue'

const schema = [
  { id: 'name', label: '企業名' },
  { id: 'addressNum', label: '郵便番号' },
  { id: 'tel', label: '企業電話番号' },
  { id: 'personInCharge', label: '担当者名' },
  { id: 'licenseCount', label: '利用可能ライセンス数' },
  { id: 'statusContract', label: '契約状況' },
  { id: 'meta.serial', label: 'シリアルナンバー' },
  { id: 'dateCreated', label: '登録日' },
]

const filterStartYear = new Date().getFullYear()
const filterStartMonth = new Date().getMonth() + 1

const filterEndYear = new Date().getFullYear()
const filterEndMonth = new Date().getMonth() + 1

const startDate = new Date(`${filterStartYear}/${filterStartMonth}/1`)
const endDate = new Date(filterEndYear, filterEndMonth, 0, 23, 59, 59)

const tableInfo: TableInfo<Company> = {
  schemaColumns: schema,
  db: dbCompanies,
  componentForm: markRaw(DbFormContractor),
  filterOptions: {
    name: [
      {
        component: CInput,
        defaultValue: '',
        type: 'text',
        compareFn: (userInput, cellVal) => new Date(cellVal) === userInput,
      },
    ],
    dateCreated: [
      {
        component: CInput,
        defaultValue: startDate,
        type: 'date',
        compareFn: (userInput, cellVal) => new Date(cellVal) > userInput,
      },
      {
        label: '～',
        component: CInput,
        defaultValue: endDate,
        type: 'date',
        compareFn: (userInput, cellVal) => new Date(cellVal) < userInput,
      },
    ],
  },
}
</script>

<docs>
  filterOptionsにフィルタの設定を書くとフィルタが出現します。
  フィルタの仕方なども詳しく設定が可能です。
</docs>

<template>
  <CAdminTable :tableInfo="tableInfo" :p_Addable="true" p_Title="タイトル漢字english">
  </CAdminTable>
</template>
